<template>
  <div>
    <breadcrumb class="breadcrumb-container"></breadcrumb>
    <el-row>
      <el-col :xl="10" :lg="13" :md="12" :sm="24" :xs="24">
        <el-form :model="addForm" ref="form" :rules="rules" label-width="70px" size="small">
          <el-form-item prop="title" label="标题">
            <el-input placeholder="标题不超过50个字符" v-model="addForm.title" :maxlength="50"></el-input>
          </el-form-item>
          <el-form-item label="发布内容" prop="conteny" class="el-tinymce">
            <tinymce :height="300" v-model="addForm.conteny" id="tinymce"></tinymce>
          </el-form-item>
          <el-form-item label="发布对象">
            <el-radio-group v-model="addForm.posted">
              <el-radio :label="0">全部</el-radio>
              <el-radio :label="1">代理商</el-radio>
              <el-radio :label="2">商户</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-button type="primary" size="small" class="fr mt20" @click="add">确认发布</el-button>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Breadcrumb from '@/components/Breadcrumb'
import Tinymce from '@/components/Tinymce'
import { mapGetters } from 'vuex'
import { addSubmit, again, issueInit } from '@/api/notice'

export default {
  name: 'issue',
  components: {
    Breadcrumb,
    Tinymce
  },
  data() {
    return {
      addForm: {
        posted: 0,
        title: '',
        conteny: ''
      },
      rules: {
        title: [{ required: true, tigger: 'blur', max: 50, message: '标题不能为空哦~' }],
        conteny: [{ required: true, tigger: 'blur', message: '内容不能为空哦~' }]
      }
    }
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  methods: {
    add() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          if (this.$route.query.type === 1) {
            again(this.addForm, this.name, this.$route.query.id).then(response => {
              if (response.data.errorCode === 0) {
                this.$message.success(response.data.errorMsg)
                this.$refs['form'].resetFields()
                this.$router.push({ name: 'message' })
              } else {
                this.$message.error(response.data.errorMsg)
              }
            })
          } else {
            addSubmit(this.addForm, this.name).then(response => {
              if (response.data.errorCode === 0) {
                this.$message.success(response.data.errorMsg)
                this.$refs['form'].resetFields()
                this.$router.push({ name: 'message' })
              } else {
                this.$message.error(response.data.errorMsg)
              }
            })
          }
        }
      })
    }
  },
  created() {
    if (this.$route.query.type === 1) {
      issueInit(this.$route.query.id).then(response => {
        this.addForm.title = response.data.result.title
        this.addForm.conteny = response.data.result.content
        this.addForm.posted = response.data.result.posted
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .el-form{
    .el-form-item{
      .el-input{
        width: 90%;
      }
    }
    .el-tinymce{
      /deep/ .el-form-item__content{
        width: 95%;
      }
    }
    .el-radio-group{
      label{
        margin-left: 10px;
      }
    }
  }
</style>
